<template>
    <div class="patient settle-sub-box">
        <div class="info">
            <div class="top clearfix">
                <el-avatar class="avatar" fit="contain"
                           :src="detail.headPortrait ? '/_api' + detail.headPortrait : ''"
                           @error="errorHandler">
                    <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                </el-avatar>
                <div class="right">
                    <div class="name">{{detail.name}}</div>
                    <div class="age">
                        <span v-if="detail.sex">{{detail.sex==0?'男': '女'}} </span>
                        <span>{{detail.age}}岁</span>
                    </div>
                </div>
            </div>
            <div class="message">
                <div>
                    住院号
                    <p>{{detail.admissionNumber}}</p>
                </div>
                <div>
                    床位号
                    <p>{{detail.sickbedNumber}}</p>
                </div>
            </div>
        </div>
        <div class="msg-card mt10">
            <div class="head">
                <div class="right" @click="$router.push('/patient-visitors?id='+detail.id)">
                    查看全部 <i class="iconfont icon-d-arrow-right"></i>
                </div>
                <div class="title">今日探视</div>
            </div>
            <div class="visit" v-for="(item,index) in visitList" :key="index">
                <div class="state" :class="{'un-visit': item.visitState==0}">{{visitStates[item.visitState]}}</div>
                <div class="name">{{item.name}}</div>
                <div class="time"><span>探视时间</span> {{item.visitTime}}</div>
            </div>
            <div class="empty" v-if="!visitList[0]">
                今日暂无探视
            </div>
        </div>
        <div class="msg-card">
            <div class="head">
                <div class="right">
                    <i class="iconfont icon-user-plus" @click="$router.push('/patient-add')"></i>
                </div>
                <div class="title">
                    陪护家属
                    <span>当前可同时陪护人员为{{detail.escortAssociatedCounts}}人</span>
                </div>
            </div>
            <div class="relation" v-for="(item,index) in relations" :key="index">
                <div class="state" :class="'state'+item.status" v-if="item.flowState==0">{{status[item.flowState]}}
                </div>
                <div class="name">{{item.name}}</div>
                <span class="link remove" @click="SwitchEscort(item,0)" v-if="item.flowState==0">解除绑定</span>
                <span class="link" @click="SwitchEscort(item,1)" v-if="item.flowState==1 && showRelationBtn">设为陪护</span>
            </div>
            <div class="empty" v-if="!relations[0]">
                您还没有陪护家属
            </div>
        </div>
        <!--        <router-view></router-view>-->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                detail: {},
                visitList: [],
                relations: [],
                visitStates: ['未探视', '探视中', '已探视', '探视中', '已过期', '待确认'],
                status: ['我的陪护', '待陪护']
            }
        },
        mounted() {
            this.$emit('footerHide')
            this.getInfo()
        },
        computed: {
            showRelationBtn: function () {
                let show = false, list = []
                if (this.relations && this.relations.length > 0) {
                    list = this.relations.filter(e => {
                        if (e.flowState === 0) return e
                    })
                    if (list.length < this.detail.escortAssociatedCounts) show = true
                }
                return show
            }
        },
        methods: {
            getInfo() {
                this.$http.get('/patientQuery').then(result => {
                    if (result.success) {
                        this.detail = result.data
                        this.getTodayVisit()
                        this.getRelation()
                    }
                })
            },
            getTodayVisit() {
                this.$http.get('/patientTodayVisit', {
                    patientId: this.detail.id
                }).then(result => {
                    if (result.success) {
                        this.visitList = result.data
                    }
                })
            },
            getRelation() {
                this.$http.get('/patientRelationQuery', {
                    patientId: this.detail.id
                }).then(result => {
                    if (result.success) {
                        this.relations = result.data
                    }
                })
            },
            errorHandler() {
                return true
            },
            SwitchEscort(item, type) {
                let _this = this
                this.$vux.confirm.show({
                    content: type ? '确定设为陪护吗？' : '确定解除绑定陪护吗？',
                    onConfirm() {
                        _this.$http.post('/patientSwitchEscort?escortId=' + item.id + '&type=' + type).then(result => {
                            if (result.success) {
                                if (type) {
                                    _this.$method.showToast('申请已发起，等待对方处理')
                                }
                                _this.getRelation()
                            }
                        })
                    }
                })
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .patient {
        background-color: #fff;
        padding: .2rem .3rem;
    }

    .info {
        position: relative;

        .card {
            position: relative;
            padding: .3rem;
            background-color: #598CDA;
            box-shadow: 0 0 6px -1px rgba(0, 0, 0, .1);
            border-radius: .1rem;
            color: #fff;
        }
    }

    .info {
        background-color: #598CDA;
        color: #fff;
        position: relative;
        border-radius: .1rem;
        box-shadow: 0 0 5px -1px rgba(0, 0, 0, .1);

        .top {
            padding: .3rem;
            border-bottom: 1px dashed #fff;
            display: flex;
            align-items: center;

            .avatar {
                width: 1.2rem;
                height: 1.2rem;
                line-height: 1rem;
                font-size: .28rem;
                float: left;
                margin-right: .3rem;
            }

            .name {
                font-size: .32rem;
                font-weight: bolder;
                line-height: .56rem;
            }

            .age {
                font-size: .24rem;
            }
        }

        .message {
            padding: .2rem .3rem;
            display: flex;
            align-items: center;
            justify-content: center;

            > div {
                flex: 1;
                text-align: center;
                font-size: .24rem;

                p {
                    color: #e8e8e8;
                    line-height: .48rem;
                    height: .48rem;
                    font-size: .28rem;
                    font-weight: bolder;
                }
            }
        }

        .edit {
            position: absolute;
            top: .2rem;
            right: .3rem;
            cursor: pointer;
            padding: 0 .1rem;
        }
    }

    .msg-card {
        background-color: #fff;
        padding: .3rem 0;

        .head {
            line-height: .48rem;
            margin-bottom: .2rem;

            .title {
                font-size: .32rem;
                font-weight: bolder;

                span {
                    font-weight: normal;
                    font-size: .28rem;
                    color: #7b7b7b;
                    margin-left: .1rem;
                }
            }

            .right {
                float: right;
                color: #39C0DE;
            }
        }

        .visit, .relation {
            padding: .3rem .2rem;
            box-shadow: 0 0 5px -1px rgba(0, 0, 0, .1);
            border-radius: 3px;
            display: flex;
            align-items: center;
            line-height: 1;
            margin-bottom: .2rem;

            .state {
                padding: .06rem;
                background-color: #598CDA;
                color: #fff;
                border-radius: 3px;
                margin-right: .2rem;
                font-size: .2rem;
                text-align: center;

                &.un-visit, &.state0 {
                    background-color: #DA6959;
                }
            }

            .time {
                flex: 1;
                text-align: right;
                margin-left: .2rem;
                color: #999;
                font-size: .24rem;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }

        .relation {
            .name {
                flex: 1;
            }

            .link {
                color: #598CDA;

                &.remove {
                    color: #DA6959;
                }
            }
        }

        .empty {
            text-align: center;
            line-height: 1.5rem;
            color: #999;
            box-shadow: 0 0 5px -1px rgba(0, 0, 0, .1);
        }
    }
</style>
